<template>
  <div>
    <div class="Y8page">
      <div class="Y8head">
  <img src="../assets/img/箭头.png" alt="" width="20px" height="20px" @click="gobanck"/>
        <span>修改密码</span>
      </div>
      <!-- 账户重新设置密码 -->
      <div class="Y8account">
        <ul>
          <li>
            <p>账户</p>
            <p style="font-size: 18px" id="cardNumber">{{ cardNumber }}</p>
          </li>
          <li>
            <p>原密码</p>
            <input
              type="password"
              placeholder="请输入支付密码"
              id="code"
              v-model="code"
            />
          </li>
          <li>
            <p>新密码</p>
            <input
              type="password"
              placeholder="请输入新密码"
              id="newCode"
              v-model="newCode"
            />
          </li>
          <li>
            <p>确认密码</p>
            <input
              type="password"
              placeholder="请再次输入密码"
              id="newCodeTwo"
              v-model="newCodeTwo"
            />
          </li>
          <li>
            <p>手机号码</p>
            <p style="font-size: 18px" id="phone">{{ ph }}</p>
          </li>
          <li>
            <div class="Y8verificationCode">
              <div class="Y8a1">
                <p>短信验证码</p>
                <input
                  type="text"
                  placeholder="请输入6位验证码"
                  id="Y8six"
                  v-model="yzm"
                />
              </div>
              <div id="gain" v-if="codeShow" @click="getPhoneCode">
                获取验证码
              </div>
              <span v-if="!codeShow" class="count">{{ count }}秒后重试</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="Y8tips">
        <p>温馨提示：</p>
        <p>
          支付密码仅支持非连续性数字组合，请不要以常用组合、特殊日期作为密码。
        </p>
      </div>
      <button @click="confirm" id="Y8confirm">确定</button>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { auth, auth1 } from "@/api/Enroll";
import { amend } from "@/api/Password";
export default {
  data() {
    return {
      codeShow: true,
      count: "",
      timer: null,
      ph: this.$route.params.phone,
      yzm: "",
      cardNumber:this.$route.params.card,
      code: "",
      newCode: "",
      newCodeTwo: "",
    };
  },
  methods: {
    // 弹框
    confirm() {
      if (code.value == "") {
        Dialog({ title: "温馨提示", message: "密码不能为空，请重新输入" });
      } else if (code.value === newCode.value) {
        Dialog({ title: "温馨提示", message: "新密码不能与原密码相同!" });
      } else if (newCode.value != newCodeTwo.value) {
        Dialog({
          title: "温馨提示",
          message: "两次输入的新密码不一致，请重新输入!",
        });
      }else {
        auth1({ phone: this.ph, code: this.yzm, type: 2 }).then((res) => {
          if (res.code == 200) {
            amend({
              hideCardNum: this.cardNumber,
              oldPassword: this.code,
              newPassword: this.newCode,
              newPassword1: this.newCodeTwo,
            })
              .then((res) => {
                if (res.code == 200) {
                  this.$router.push({
                    name: "win",
                    params: {
                      cardNumber: this.cardNumber,
                    },
                  });
                }else{
                    Dialog.alert({
                  message: res.msg,
                }).then(() => {
                    this.code = "",
                    this.newCode ="",
                    this.newCodeTwo="",
                    this.yzm = "",
                    clearInterval(this.timer);
                    this.codeShow = true
                    
                });
                }
              })
              .catch((err) => {
                Dialog.alert({
                  message: "注册失败",
                }).then(() => {
                   
                });
              });
          }
        });
      }
    },
    getPhoneCode() {
      //获取短信验证码
      // 正则验证b
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      let code = {
        mobile: this.mobile,
        sms_type: "login",
      };
      auth({ phone: this.ph }).then((res) => {});
    },
    // 返回上一页
    gobanck(){
        this.$router.push({
            name:"Detailpage"
        })
    }
  },
};
</script>

<style scoped src="../assets/css/password.css">

</style>



    
